<template>
  <div class="home">
    <div class="layout">
      <div v-for="(item, index) in barrageList" :key="index" class="message"
        :style="`top:${item.top}%; left: ${item.left || 100}%; animation-duration:${item.speed}s`">
        <div class="imgbox"><img :src="item.img" alt="图片"></div>
        <p>{{ item.text }}</p>
      </div>
    </div>

    <div class="search d-flex">
      <input v-model="message" @keyup.enter="sendBarrage" type="text" placeholder="请写下你的留言...">
      <button class="btn" @click="sendBarrage">发送</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getMsgList, imgUrl, publishMsg } from "@/api/index"
import { useCounterStore } from "@/stores/counter"

const counter = useCounterStore()
// 导入图片资源
import img1 from '../static/imgs/images/1.jpg'
import img2 from '../static/imgs/images/2.jpg'
import img3 from '../static/imgs/images/3.jpg'
import img4 from '../static/imgs/images/4.jpg'
import img5 from '../static/imgs/images/5.jpg'
import img6 from '../static/imgs/images/6.jpg'
import img7 from '../static/imgs/images/7.jpg'
import img8 from '../static/imgs/images/8.jpg'
import img9 from '../static/imgs/images/9.jpg'
import { ElMessage } from 'element-plus'
// 弹幕数据接口
interface BarrageItem {
  text: string
  img: string | undefined
  top: number
  speed: number
  left: number
}

// 输入框绑定值
const message = ref<string>('')

// 弹幕列表
const barrageList = ref<BarrageItem[]>([])

// 图片数组
const imageList = [img1, img2, img3, img4, img5, img6, img7, img8, img9]

// 示例弹幕数据
const exampleBarrages = [
  { text: "欢迎来到我的博客！", img: imageList[0] },
  { text: "这个界面设计真棒！", img: imageList[1] },
  { text: "支持一下博主！", img: imageList[2] },
  { text: "内容很有价值", img: imageList[3] },
  { text: "期待更多更新", img: imageList[4] },
  { text: "学习到了很多", img: imageList[5] },
  { text: "666", img: imageList[6] },
  { text: "好漂亮", img: imageList[7] },
  { text: "大家好", img: imageList[8] },
  { text: "1111", img: imageList[7] },
  { text: "牛牛牛", img: imageList[7] },
  { text: "小时候词不达意，长大却言不由衷", img: imageList[7] },
]

// // 随机图片
// const imgUrlRandom = () => {
//   const index = Math.floor(Math.random() * imageList.length)
//   // console.log(index)
//   return imageList[index]
// }
const publishMsgFn = async (msg_text: string, imgUrl: string, username: string, user_id: string | number) => {
  await publishMsg({
    msg_text,
    imgUrl,
    username,
    user_id
  })
    .then(
      res => {
        // console.log(res.data)
        if (res.data.code == 200) {
          ElMessage({
            showClose: true,
            message: '发送成功',
            type: 'success',
            offset: 100,
            plain: true,
          })
        } else {
          ElMessage({
            showClose: true,
            message: res.data.msg,
            type: 'error',
            offset: 100,
            plain: true,
          })
          return false
        }
      },
      err => {
        console.log(err)
      }
    )
}

interface IMsg {
  id: number;
  msg_text: string;
  imgUrl: string;
}
// 获取弹幕数据
const getMsgListFn = async () => {
  await getMsgList()
    .then(
      res => {
        // console.log(res)
        const arr = res.data.result.map((item: IMsg) => {
          return {
            img: imgUrl(item.imgUrl),
            text: item.msg_text,
            id: item.id,
            top: Math.random() * 80 + 7,
            speed: Math.random() * 15 + 20,  // 随机速度 16s-35s
            left: 100
          }
        })
        barrageList.value.push(...arr)
        // console.log(arr)
        // console.log(barrageList.value)
      },
      err => {
        console.log(err)
      }
    )
}
getMsgListFn()


// 发送弹幕
const sendBarrage = async () => {
  const token = localStorage.getItem("TTOO")
  if (token) {
    const userStatus = await counter.loginedStatusFn(token)
    // console.log(userStatus)
    if (userStatus) {
      if (message.value.trim() == '' || message.value == null) {
        ElMessage({
          showClose: true,
          message: '你还没写呢~~',
          type: 'warning',
          offset: 100,
          plain: true,
        })
        return
      }
      const userData = counter.userData
      await publishMsgFn(message.value, userData.imgUrl, userData.username, userData.id)
      await getMsgListFn()
      message.value = ''
    } else {
      ElMessage({
        showClose: true,
        message: '登录状态已过期~~',
        type: 'error',
        offset: 100,
        plain: true,
      })
      return false
    }
  } else {
    ElMessage({
      showClose: true,
      message: '请先登录~~',
      type: 'error',
      offset: 100,
      plain: true,
    })
    return false
  }


}

// 发送示例弹幕
const sendExampleBarrages = () => {
  exampleBarrages.forEach((barrage, index) => {
    setTimeout(() => {
      const newBarrage: BarrageItem = {
        text: barrage.text,
        img: barrage.img,
        top: Math.random() * 80 + 7, // 随机位置 7%-90%
        speed: Math.random() * 15 + 20,  // 随机速度 16s-35s
        left: 100
      }
      barrageList.value.push(newBarrage)
    }, index * 500) // 每隔1秒发送一条示例弹幕
  })
}

// 页面加载完成后发送示例弹幕
onMounted(() => {
  sendExampleBarrages()
})
</script>

<style lang="less" scoped>
@keyframes show {
  0% {
    opacity: 0.65;
    transform: translateY(-3%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

html,
body {
  width: 100%;
  height: 100%;
}

.home {
  width: 100%;
  height: 100vh;
  // padding-bottom: 50px;
}

.layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-image: url(../static/imgs/images/messageBg.jpg);
  background-size: cover;
  animation: show 1s ease-in-out;
}

.message {
  position: absolute;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
  color: #fff;
  border-radius: 15px;
  border: 1px solid #ccc;
  word-wrap: nowrap;
  white-space: nowrap;
  // right: -100%;  // 移除这行
  // z-index: 1000;
  animation: barrageMove linear infinite;
}

@keyframes barrageMove {
  from {
    left: 100%;
  }

  to {
    left: -100%;
  }
}

.message .imgbox {
  width: 30px;
  height: 30px;
  overflow: hidden;
  flex-shrink: 0;
}

.message img {

  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.message p {
  margin: 0;
  padding: 0 10px;
  vertical-align: middle;
}

.search {
  height: 46px;
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 80%;
  max-width: 500px;

  .btn {
    margin-left: 10px;
    border-radius: 24px;
    // background-color: #fff;
    border: 1px solid #fff;
    padding: 0 10px;
    color: #fff;
    cursor: pointer;
  }
}

.search input {
  flex: 1;
  border-radius: 24px;
  display: block;
  height: 46px;
  padding: 0px 20px;
  color: #fff;
  box-sizing: border-box;
  border: 1px solid #fff;
  outline: none;
  background-color: transparent;

  // 添加 placeholder 颜色样式
  &::placeholder {
    color: #fff; // 设置您想要的 placeholder 颜色
    opacity: 1; // 确保不透明度为1
  }

  // 兼容不同浏览器的 placeholder 样式
  &::-webkit-input-placeholder {
    color: #fff;
  }

  &::-moz-placeholder {
    color: #fff;
    opacity: 1;
  }

  &:-ms-input-placeholder {
    color: #fff;
  }
}
</style>
